<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg1{
            background:red;
        }
        .bg2{
            background:red;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
$(f);

function f(){
    // mouseover + mouseout
    $("li").hover(
        function(){
            // addClass + removeClass
            $(this).toggleClass("bg1");
        }
    );

    $("li").click(function(){
        $("li").removeClass("bg2");
        $(this).addClass("bg2");
    });
}
    </script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</body>
</html>